<!--关注-->
<template>

  <div class="main-header">
    <p>
      <span>今日概況 </span>
      <span>2023年1月27日</span>
    </p>

    <div style="text-align: center; padding: 25px 0;">
      <p>現職人數</p>
      <h3 style="color: #FFFF00; font-weight: 700; font-size: 33px;">34650</h3>
    </div>

    <div class="info-main">
      <div>
        <p><i></i> 在崗</p>
        <p><span class="person-num">33576</span>人</p>
      </div>
      <div>
        <p><i></i> 休假</p>
        <p><span class="person-num">33576</span>人</p>
      </div>
      <div>
        <p><i></i> 缺勤</p>
        <p><span class="person-num">33576</span>人</p>
      </div>
    </div>

    <div class="info-card">
      <div style="display: flex; justify-content: space-between; margin-bottom: 15px;">
        <div>
          <span style="font-weight: 700;">今日數據變化</span>
          <span class="font-small" style="margin-left: 10px; color: #666;">共20條</span>
        </div>
        <span class="font-small" style="color: #666;">查看全部</span>
      </div>
      <table>
        <tr>
          <th style="width: 30%;"></th>
          <th>最新</th>
          <th>較昨日</th>
          <th>較上月</th>
        </tr>
        <tr>
          <td>開辦課程數目</td>
          <td>28,210</td>
          <td>+4</td>
          <td><span>+4</span></td>
        </tr>
        <tr>
          <td>開辦課程數目</td>
          <td>28,210</td>
          <td>+4</td>
          <td><span>+4</span></td>
        </tr>
        <tr>
          <td>近5年現職人員平均年齡變化</td>
          <td>28,210</td>
          <td>+4</td>
          <td><span>+4</span></td>
        </tr>
      </table>
    </div>

  </div>


  <div class="emphasis" style="padding: 15px;">
    <h4 style="margin-bottom: 10px; font-weight: 700;">重點關注指標</h4>
    <van-collapse v-model="activeName" accordion>
      <van-collapse-item name="1">
        <template #title>
          <div style="font-size: 16px;">各監督實體/其他機關</div>
        </template>
        <my-chart style="height: 40vh;" chartId="0101-02" :params="{year: '2023'}" :type="chartType" direction="h"></my-chart>
        <van-button @click="ChangeChart">切换</van-button>
      </van-collapse-item>
      <!--<van-collapse-item name="2">
        <template #title>
          <div style="font-size: 16px;">1999年-2022年人員數量</div>
        </template>
        <my-chart style="height: 20vh;" chartId="0101-02" :params="{year: '2023'}"></my-chart>
      </van-collapse-item>
      <van-collapse-item name="3">
        <template #title>
          <div style="font-size: 16px;">今年人員流動</div>
        </template>
        <my-chart style="height: 20vh;" chartId="0101-02" :params="{year: '2023'}"></my-chart>
      </van-collapse-item>
      <van-collapse-item name="4">
        <template #title>
          <div style="font-size: 16px;">現職學歷分析</div>
        </template>
        <my-chart style="height: 20vh;" chartId="0101-02" :params="{year: '2023'}"></my-chart>
      </van-collapse-item>
      <van-collapse-item name="5">
        <template #title>
          <div style="font-size: 16px;">現職學歷分析</div>
        </template>
        <my-chart style="height: 20vh;" chartId="0101-02" :params="{year: '2023'}"></my-chart>
      </van-collapse-item>
      <van-collapse-item name="6">
        <template #title>
          <div style="font-size: 16px;">現職年齡分析</div>
        </template>
        <my-chart style="height: 20vh;" chartId="0101-02" :params="{year: '2023'}"></my-chart>
      </van-collapse-item>
      <van-collapse-item name="7">
        <template #title>
          <div style="font-size: 16px;">現職性別分析</div>
        </template>
        <my-chart style="height: 20vh;" chartId="0101-02" :params="{year: '2023'}"></my-chart>
      </van-collapse-item>-->
    </van-collapse>
  </div>

</template>

<script setup>
  import MyChart from '@/components/common/MyChart.vue';
  import { ref } from "vue";

  const activeName = ref('');

  const chartType = ref('bar');
  function ChangeChart() {
    chartType.value = chartType.value === 'bar' ? 'line' : 'bar'
  }

</script>

<style lang="scss" scoped>
.main-header {
  background-color: rgba(32, 160, 144, 1);
  color: white;
  padding: px(15);
  margin-bottom: px(50);
}
.info-main {
  display: flex;
  justify-content: space-between;
  p {
    i {
      display:  inline-block;
      width: 10px;
      height: 10px;
      border: solid 2px #d7d51c;
      border-radius: 50%;
      
    }
  }
  .person-num {
    font-size: 20px;
    font-weight: 700;
  }
}

.info-card {
  background-color: #fff;
  color: #282828;
  border-radius: 6px;
  padding: 15px;
  margin-top: 20px;
  margin-bottom: px(-50);
  box-shadow: 0 1PX 4PX 1PX rgba(0, 0, 0, 0.08);
  table {
    width: 100%;
    border-spacing: 0;
    font-size: 14px;
    th {
      padding: 5px;
      text-align: left;
    }
    td {
      border-bottom: solid 1px #ddd;
      padding: 5px;
    }
    tr:last-child td {
      border-bottom: none;
    }
  }
}

.emphasis .van-collapse {
  border-radius: 6px;
  overflow: hidden;
}
</style>